<script setup lang="ts">
// 核心步骤 : h函数(createVNode函数) + render配合使用
// 1. h函数是创建虚拟DOM结构的
// 2. render函数将虚拟DOM结构渲染到指定的区域
import { h, render, onMounted } from 'vue'
const child1 = h('p', null, '我是P1')
const child2 = h('p', null, '我是P2')
// h函数中有三个参数
// 参数1: 是创建的虚拟DOM的节点类型, 一个HTML标签名、一个组件、一个异步组件、或一个函数式组件。
// 参数2: 是一个对象, 这个对象中是对创建的虚拟Dom元素的描述, 没有信息描述可以写null
// 参数3: 虚拟DOM节点中的内容, 可以是字符串也可是数组
// const VNode = h('div', { id: 'hbox', className: 'content' }, '我是虚拟创建的元素') // 字符串方式
const VNode = h('div', { id: 'hbox', className: 'content' }, [child1, child2])
console.log(VNode)

// render函数渲染  有两个参数
// 参数1：是需要渲染的虚拟DOM元素
// 参数2: 渲染的位置(往哪个真实的DOM中渲染)
onMounted(() => {
  render(VNode, document.querySelector('.box')!)
})
</script>
<template>
  <div class="box">
    <!-- <h1 id="hbox" class="content">我是一个大标题</h1> -->
  </div>
</template>
<style scoped lang="less">
:deep(.content) {
  width: 300px;
  height: 300px;
  background-color: pink;
}
</style>